<template>
  <div class="action-view">
    <div class="details-head">
      <el-breadcrumb slot="breadcrumb">
        <el-breadcrumb-item to="/server">告警动作</el-breadcrumb-item>
        <el-breadcrumb-item>{{ accessTitle }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card class="detail-card">
      <el-form
        ref="record"
        label-position="top"
        :model="record"
        :disabled="disabled"
        :rules="disabled ? {} : rules">
        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="告警方式名称" prop="name">
              <el-input v-model="record.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="告警方式" prop="type">
              <le-select
                v-model="record.type"
                :field="{ key: 'type' }"
                :record="record"
                :disabled="disabled">
              </le-select>
            </el-form-item>
          </el-col>

          <!-- 邮件告警 -->
          <el-col v-if="record.type === 0" :span="12">
            <el-form-item prop="email" label="邮箱地址">
              <el-input v-model="record.email"></el-input>
            </el-form-item>
          </el-col>
          <!-- 短信 -->
          <el-col v-else-if="record.type === 1" :span="12">
            <el-form-item prop="phone" label="电话号码">
              <el-input v-model="record.phone"></el-input>
            </el-form-item>
          </el-col>
          <!--  -WebHook -->
          <div v-else-if="record.type === 2">
            <el-col :span="12">
              <el-form-item prop="url" label="URL">
                <el-input v-model="record.url"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="token" label="Token">
                <el-input v-model="record.token"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <!-- websocket -->
          <el-col v-if="record.type === 3" :span="12">
            <el-form-item prop="uri" label="WebSocket 连接字符串">
              <el-input v-model="record.uri"></el-input>
            </el-form-item>
          </el-col>
          <!-- 通用部分 -->
          <el-col :span="12">
            <el-form-item prop="title" label="告警标题">
              <el-input v-model="record.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="content" label="告警内容">
              <el-input v-model="record.content"></el-input>
            </el-form-item>
          </el-col>

          <el-col v-if="disabled" :span="12">
            <el-form-item label="创建用户" prop="user">
              <le-select
                v-model="record.user"
                :field="{ url: '/select/user'}"
                :record="record"
                :disabled="disabled">
              </le-select>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </el-card>

    <div v-if="!disabled" class="oper-area">
      <el-button type="success" @click="save">保存</el-button>
    </div>
  </div>
</template>


<script>
  import details from '~/mixins/details'

  export default {
    name: 'product-action-view',
    mixins: [details],
    components: {},
    data() {
      return {
        url: '/action',
        record: {
          config: {},
        },
        rules: {
          'name': [
            {
              'required': true,
              'message': '请填写告警方式名称',
            },
          ],
          type: [
            {
              'required': true,
              'message': '请选择告警方式',
            },
          ],
          title: [
            {
              'required': true,
              'message': '请填写告警标题',
            },
          ],
          content: [
            {
              'required': true,
              'message': '请填写告警内容',
            },
          ],
          phone: [
            {
              'required': true,
              'message': '请填写手机号码',
            },
            {
              min: 9,
              max: 11,
              'message': '请填写正确的手机号码',
              trigger: 'change',
            },
          ],
          email: [
            {
              'required': true,
              'message': '请填写邮箱',
            },
            {
              type: 'email',
              'message': '请填写正确的邮箱',
              trigger: 'change',
            },
          ],
          url: [
            {
              'required': true,
              'message': '请填写WebHook URL',
            },
          ],
          token: [
            {
              'required': true,
              'message': '请填写WebHook Token',
            },
          ],
          uri: [
            {
              'required': true,
              'message': '请填写 WebSocket URI',
            },
          ],
        },
        dict: {
          0: 'email',
          1: 'phone',
          2: 'url,token',
          3: 'uri',
        },
      }
    },
    methods: {
      afterLoadData(record) {
        const config = record.config
        const rule = this.dict[record.type]
        rule && rule.split(',').forEach((key) => {
          this.$set(record, key, config[key])
        })
        this.$set(record, 'title', config.title)
        this.$set(record, 'content', config.content)
      },
      beforeSave() {
        const rule = this.dict[this.record.type]
        if (rule) {
          rule.split(',').forEach((key) => {
            console.log(key)
            this.record.config[key] = this.record[key]
          })
        }
        this.record.config.title = this.record.title
        this.record.config.content = this.record.content
      },
    },
  }
</script>
